<template>
	<view class="orderone_wrapper">
		<view class="shopname_wrap">
			<i class="iconfont icon-dianpu"></i>
			<text class="name">{{shopname}}</text>
		</view>
		<view class="order_item">
			<view class="order_up" v-for="item in goods_list" :key="item.id">
				<view class="picture">
					<!-- <img :src="item.cover_url" alt="" @error="tabErrorPicture" /> -->
					<img :src="item.cover_url" alt="" />
				</view>
				<view class="chat_intro">
					<view class="intro">
						<view class="title">{{item.title}}</view>
						<view class="msc" v-html="orderInfo.custom_desc"></view>
					</view>
					<view class="price">
						<view>x<text>{{orderInfo.num || 1}}</text></view>
						<view>￥<text class="tip">{{item.price}}</text></view>
					</view>
				</view>
			</view>
			<view class="order_down">
				需付款：<text class="tip">{{total || 0}}</text>
			</view>
		</view>
		<view class="coupon" @click="findCoupon">
			<view>优惠券</view>
			<view v-if="!coupons"><text class="num">{{list.length ? list.length + '张可用' : '暂无可用'}}</text><i
					class="iconfont icon-arrow-right"></i>
			</view>
			<view v-else><text class="nums">-￥{{coupons.jian_price}}</text><i class="iconfont icon-arrow-right"></i>
			</view>
		</view>
		<view class="coupon_footer">
			<view>合计：<text>￥{{total}}</text></view>
			<button @click="submitOrder">提交订单</button>
		</view>
		<!-- 优惠券弹出层 -->
		<u-popup :show="couponVisible" :round="10" mode="bottom" :closeOnClickOverlay="true" @close="closeOrderPopup">
			<view class="search_wrap">
				<u--input placeholder="请输入优惠码" clearable shape="circle" v-model="keyword"></u--input>
				<u--text type="error" class="searchBtn" text="兑换" @click="searchExchange"></u--text>
			</view>
			<view class="tabs_wrap">
				<u-tabs :list="navList" :current="current" :itemStyle="{'width': '50%','height': '44px','padding': 0}"
					@click="chooseItem"></u-tabs>
				<view class="tabs_content" v-if="list.length > 0">
					<view class="tabs_item" v-if="current > 0">不可用</view>
					<view class="tabs_item" v-else>
						<scroll-view :scroll-y="true" style="height: 605rpx;">
							<view class="quan" v-for="(item,i) in list" :key="i">
								<view class="quanInfo">
									<text class="couponMpoey">￥{{ item.jian_price }} <text
											class="couponMpoeyInfo">满{{item.menkan_price}}减{{item.jian_price}}</text></text>
									<text class="couponName">{{item.name}}</text>
									<text
										class="couponTime">{{timestampToDate(item.start_time)}}-{{timestampToDate(item.end_time)}}</text>
								</view>
								<view class="receiveBtn">
									<view class="receive" v-if="currSelect != i" @click="using(item,i)">使用</view>
									<view class="receive receives" v-else>使用</view>
								</view>
							</view>
							<!-- 	<div class="van-coupon" v-for="(item,i) in list" :key="i">
								<div class="van-coupon__content">
									<div class="van-coupon__head">
										<h2 class="van-coupon__amount">{{item.jian_price}}<span>元</span></h2>
										<p class="van-coupon__condition">使用门槛为
											</p>
											<p class="van-coupon__condition">满{{item.menkan_price}}优惠{{item.jian_price}}</p>
									</div>
									<div class="van-coupon__body">
										<p class="van-coupon__name">{{item.name}}</p>
										<p class="van-coupon__valid">{{item.create_time}}-{{item.update_time}}</p>
										<div role="checkbox" tabindex="0" aria-checked="false"
											class="van-checkbox van-coupon__corner" size="18">
											<div class="van-checkbox__icon van-checkbox__icon--round"><i
													class="van-icon van-icon-success"></i></div>
										</div>
									</div>
								</div>
							</div> -->
						</scroll-view>
					</view>
				</view>
				<view class="noData" v-if="list.length == 0">
					<i class="iconfont icon-youhuiquan"></i>
					<text class="name">暂无优惠券</text>
				</view>
			</view>

			<!-- 	<view class="">
				123
			</view> -->
			<view class="btn_footer">
				<button @click="closeOrder">不使用优惠券</button>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		api_getOneKnowledgeInfo
	} from '@/api/api'
	import {
		api_getchangedhm,
		api_getOrderUseCouponByCart,
		api_getconfirm,
		api_getOrderUseCouponByBuy,
		api_submit
	} from '@/api/placeorder'
	import {
		timestampToDate
	} from '@/utils/util'

	export default {
		data() {
			return {
				shopname: uni.getStorageSync('company_name'),
				orderInfo: {},
				keyword: '',
				navList: [{
						name: '可用'
					},
					{
						name: '不可用'
					},
				],
				list: [],
				current: 0,
				couponVisible: false,
				coupons: null,
				goods_list: [],
				total: null,
				currSelect: 0,
				timestampToDate: timestampToDate,
			}
		},
		onLoad(options) {
			this.options = options;
			this.getOrderUseCouponByCart(options);
			this.options.scene = options.data_type ? 'buy' : 'cart';
		},
		methods: {
			init(opt) { //	初始化
			
				uni.showLoading({
				  title: '加载中...',
				  mask: true, // 是否显示透明蒙层，防止触摸穿透
				});
				// uni.showLoading({
				// 	title: "数据加载中...",
				// 	 mask: true, // 是否显示透明蒙层，防止触摸穿透
				// });
				api_getconfirm({
					ids: opt.ids,
					scene: opt.scene,
					data_type: opt.data_type,
					ucp_id: (this.coupons || {}).user_coupon_id || null,
				}).then(res => {
					console.log(res, "res")
					if (res.code == 1) {
						console.log(res, "res")
						this.goods_list = res.data.goods_list;
						this.total = res.data.total;
						
					} else {
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'error'
						// });
						console.log(111111)
						uni.navigateBack()
					}
					uni.hideLoading();
				}).catch(err =>{
					console.log(111111)
				})





			},
			tabErrorPicture() { // 学习记录列表图片加载失败				
				this.orderInfo.cover = this.errorProduct;
			},
			findCoupon() { // 查看优惠券
				this.couponVisible = true;
			},
			chooseItem(v) { // 优惠券类型选择
				this.current = v.index;
			},
			closeOrderPopup() {
				this.couponVisible = false;

			},
			closeOrder() {
				this.couponVisible = false;
				this.coupons = null;
				this.currSelect = null;
			},
			searchExchange() { // 兑换
				if (!this.keyword) {
					uni.showToast({
						title: '兑换内容为空',
						icon: 'error'
					});
					return;
				}
				api_getchangedhm().then(res => {

					if (res.code == 1) {

					} else {

					}
					uni.showToast({
						title: res.msg,
						icon: 'error'
					});
				})

			},
			async submitOrder() { //	提交订单
				let opt = this.options;
				let obj = {
					ucp_id: (this.coupons || {}).user_coupon_id || null,
					ids: opt.ids,
					scene: opt.scene,
					data_type: opt.data_type
				}
				let result = await api_submit(obj);
				if (result.code == 1) {
					let data = result.data;
				
					WeixinJSBridge.invoke(
						'getBrandWCPayRequest', {
							"appId": data.app_id, //公众号ID，由商户传入     
							// prepay_id:result.data.prepay_id,
							"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": data.nonceStr, //随机串     
							"package": `prepay_id=${data.prepay_id}`,
							"signType": "MD5", //微信签名方式：     
							"paySign": data.paySign //微信签名 
						},
						res => {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								// 使用以上方式判断前端返回,微信团队郑重提示：
								//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
								app.$toast('支付成功!')	
								uni.redirectTo({ url:'/pages/order/index' });
							}else{
								app.$toast('待支付!')
								// uni.redirectTo({ url:'/pages/order/index' });
							}
						})
				} else {
					uni.showModal({
						title: '提示', //标题
						content: result.msg, //提示内容
						showCancel: false //不显示取消按钮
					})
				}
				console.log('submit order');
			},
			getOrderUseCouponByCart(opt) {

				if (opt.data_type) {
					api_getOrderUseCouponByBuy({
						id: opt.ids,
						data_type: opt.data_type
					}).then(res => {
						this.list = res.data || [];
						this.coupons = this.list[0] || null;
						this.init(this.options);

					})
				} else {


					api_getOrderUseCouponByCart({
						ids: opt.ids
					}).then(res => {

						this.list = res.data || [];
						this.coupons = this.list[0] || null
						this.init(this.options);

					})
				}


			},
			using(row, i) {
				console.log(row, "row")
				this.coupons = row;
				this.init(this.options);
				this.couponVisible = false;
				this.currSelect = i;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderone_wrapper {
		height: 80vh;
		padding: 0 0 100px 0;
		box-sizing: border-box;
		text-align: center;
		overflow: hidden;
		position: relative;

		.shopname_wrap {
			height: 40px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #eaeaea;
			padding: 0 10px;
			box-sizing: border-box;

			.iconfont {
				display: block;
				font-size: 22px;
			}

			.name {
				display: block;
				font-size: 15px;
				padding: 0 0 0 5px;
			}
		}

		.order_item {
			padding: 10px;
			box-sizing: border-box;

			.order_up {
				display: flex;
				padding: 20rpx 0;

				.picture {
					width: 100px;
					height: 100px;

					img {
						display: block;
						width: 100%;
						height: 100%;
						margin: 0;
					}
				}

				.chat_intro {
					width: calc(100% - 100px);
					padding: 0 0 0 10px;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.intro {
						text-align: left;

						.title {
							font-size: 14px;
						}

						.msc {
							font-size: 12px;
							color: #999;
						}
					}

					.price {
						display: flex;
						justify-content: space-between;
						align-items: baseline;
						color: rgb(170, 170, 170);

						>view {
							font-size: 22rpx;
							color: #f00;
						}

						.tip {
							display: inline-block;
							font-size: 24rpx;
							color: #f00;
						}
					}
				}
			}

			.order_down {
				font-size: 14px;
				line-height: 24px;
				text-align: right;

				.tip {
					color: #f00;
				}
			}
		}

		.coupon {
			height: 40px;
			padding: 0 10px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			font-size: 14px;
			justify-content: space-between;
			border-top: 1px solid #eaeaea;
			border-bottom: 1px solid #eaeaea;

			.num {
				color: #ccc;
			}

		}

		.coupon_footer {
			width: 100%;
			height: 50px;
			padding: 0 0 0 20px;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fafafa;

			>view {
				text {
					color: #f00;
				}
			}

			button {
				width: 150px;
				height: 50px;
				border-radius: 0;
				background-color: #f00;
				color: #fff;
				margin: 0;
			}
		}

		.u-popup {
			.search_wrap {
				width: 100%;
				padding: 10px 60px 10px 10px;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				position: relative;

				.searchBtn {
					width: 40px;
					line-height: 38px;
					position: absolute;
					right: 10px;
					top: 10px;
				}
			}

			.tabs_wrap {
				padding: 0 0 20px;
				box-sizing: border-box;

				.tabs_content {
					.tabs_item {}
				}

				.noData {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 40px 0;
					box-sizing: border-box;

					.iconfont {
						font-size: 60px;
						color: #eee;
					}

					.name {
						font-size: 14px;
						line-height: 44px;
						color: #999;
					}
				}
			}

			.btn_footer {
				button {
					background-color: #f00;
					border-radius: 0;
					border: none;
					font-size: 15px;
					color: #fff;
				}
			}
		}
	}


	.quan {
		margin: 22rpx 37rpx;


		text-align: left;
		box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
		background-color: #FFF5F6;
		border-radius: 10rpx;
		display: flex;
		font-family: PingFang SC;
	}

	.quanInfo {
		background-image: radial-gradient(circle at right top, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx), radial-gradient(circle at right bottom, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx);
		border-right: 1px dashed #F64F51;
		padding: 30rpx 30rpx;
		width: 70%;
	}

	.couponMpoey {
		font-size: 30rpx;
		font-weight: 700;
		color: #ff3600;
		display: block;
	}

	.couponMpoeyInfo {
		font-size: 26rpx;
		padding-left: 10rpx;
	}

	.couponName {
		font-size: 24rpx;
		font-weight: 500;
		color: #797979;
		display: block;
	}

	.couponTime {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #797979;
	}

	.receiveBtn {
		background-image: radial-gradient(circle at left top, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx), radial-gradient(circle at left bottom, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: -2rpx;
	}

	.receive {
		border-radius: 23rpx;
		background-color: #5FC484;
		padding: 7rpx 31rpx;
		text-align: center;
		margin-left: 26rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}

	.receives {
		background: #999;
	}

	.van-coupon {
		margin: 0 12px 12px;
		overflow: hidden;
		background-color: #fff;
		border-radius: 8px;
		// box-shadow: 0 0 4px rgba(0, 0, 0, .1);
		box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
		text-align: left;

		.van-coupon__content {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			box-sizing: border-box;
			min-height: 84px;
			padding: 14px 0;
			color: #323233;
		}

		.van-coupon__head {
			position: relative;
			min-width: 100px;
			padding: 0 8px;
			color: #ee0a24;
			text-align: center;
			// flex: 0;
		}

		.van-coupon__amount {
			margin-bottom: 12rpx;
			font-weight: 500;
			font-size: 46rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.van-coupon__condition {
			font-size: 12px;
			// line-height: 26rpx;
			padding: 2rpx 0;
			white-space: pre-wrap;
			white-space: nowrap;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

		}

		.van-coupon__body {
			position: relative;
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			border-radius: 0 8px 8px 0;

			.van-coupon__name {
				margin-bottom: 10px;
				font-weight: 700;
				font-size: 14px;
				line-height: 20px;
			}

			.van-coupon__valid {
				font-size: 12px;
			}
		}
	}
</style>